<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!doctype html>
<html>
<head>
    <%@ include file="/common.jsp" %>
    <title>入驻申请 结算账户信息</title>
    <link rel="stylesheet" type="text/css" href="${ctx }/css/weui.min.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/statics/aui/css/aui.css"/>
</head>
<body>
<section class="aui-content">
    <img src="${ctx}/statics/aui/images/regLogo.png" style="width: 100%;">
</section>

<div class="page">
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            <div class="weui-navbar">
                <div class="weui-navbar__item" id="isApplyDiv1">
                    第一步
                </div>
                <div class="weui-navbar__item"  id="isApplyDiv2">
                    第二步
                </div>
                <div class="weui-navbar__item weui-bar__item_on"  id="isApplyDiv3">
                    第三步
                </div>
            </div>
            <div class="weui-tab__panel">

                <form action="${ctx}/auth/submitSettlingAccount" method="post" id="submitSettlingAccount"
                      enctype="multipart/form-data">

                <!-- 第三步操作   -->
                <div class="page__bd isApplyDiv" id="isApply3">
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell" id="bankUserDiv"><!-- weui-cell_warn -->
                            <div class="weui-cell__hd"><label class="weui-label">结算账户户名</label></div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" id="bankUser" name="bankUser" maxlength="10"
                                       type="text" placeholder="结算账户户名">
                            </div>
                            <div class="weui-cell__ft">
                                <i class="weui-icon-warn"></i>
                            </div>
                        </div>
                        <div class="weui-cell" id="bankNameDiv"><!-- weui-cell_warn -->
                            <div class="weui-cell__hd"><label class="weui-label">结算账户开户行</label></div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" id="bankName" name="bankName" maxlength="30"
                                       type="text" placeholder="账户开户行(精确到支行)">
                            </div>
                            <div class="weui-cell__ft">
                                <i class="weui-icon-warn"></i>
                            </div>
                        </div>
                        <div class="weui-cell" id="bankCardDiv"><!-- weui-cell_warn -->
                            <div class="weui-cell__hd"><label class="weui-label">结算账号</label></div>
                            <div class="weui-cell__bd">
                                <input class="weui-input" id="bankCard" name="bankCard" maxlength="20"
                                       type="text" placeholder="结算账号">
                            </div>
                            <div class="weui-cell__ft">
                                <i class="weui-icon-warn"></i>
                            </div>
                        </div>
                    </div>


                    <div class="weui-cells__title">结算类型</div>
                    <div class="weui-cells weui-cells_radio">
                        <label class="weui-cell" for="x11" onclick="setType(1);">
                            <div class="weui-cell__bd"><p>对私结算</p></div>
                            <div class="weui-cell__ft">
                                <input type="radio" class="weui-check" name="radio1" id="x11" checked="checked" value="1"/>
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                        <label class="weui-cell weui-check__label" for="x12" onclick="setType(2);">
                            <div class="weui-cell__bd"><p>对公结算</p></div>
                            <div class="weui-cell__ft">
                                <input type="radio" name="radio1" class="weui-check" id="x12" value="2"/>
                                <span class="weui-icon-checked"></span>
                            </div>
                        </label>
                    </div>

                    <div class="page__bd" id="settlementType1">
                        <div class="weui-cells__title"><h4 class="page__title">结算人身份证原件照</h4></div>
                        <div class="weui-cells weui-cells_form">

                            <div class="weui-cell" id="settleUserPositiveDiv"><!-- weui-cell_warn -->
                                <div class="weui-cell__bd">
                                    <img v-model="settleUserPositiveImg" id="settleUserPositiveImg" title="上传身份证正面照"
                                         src="../statics/aui/images/sfzzm.png" width="90%" onclick="settleUserPositive.click()"
                                         height="100px;">
                                    <input type="file" name="settleUserPositive" id="settleUserPositive" style="visibility: hidden;
                             height: 0px;" multiple accept="image/*" capture="camera"
                                           onchange="readURL('settleUserPositiveImg',this)">
                                </div>
                                <div class="weui-cell__ft">
                                    <i class="weui-icon-warn"></i>
                                </div>
                            </div>
                            <div class="weui-cell" id="settleUserOppositeDiv"><!-- weui-cell_warn -->
                                <div class="weui-cell__bd">
                                    <img v-model="settleUserOppositeImg" id="settleUserOppositeImg" title="上传身份证反面照"
                                         src="../statics/aui/images/sfzfm.png" width="90%" onclick="settleUserOpposite.click()"
                                         height="100px">
                                    <input type="file" id="settleUserOpposite" name="settleUserOpposite" style="visibility: hidden;
                                    height: 0px" multiple capture="camera" accept="image/*"
                                           onchange="readURL('settleUserOppositeImg',this)">
                                </div>
                                <div class="weui-cell__ft">
                                    <i class="weui-icon-warn"></i>
                                </div>
                            </div>
                        </div>
                        <div class="weui-cells__title"><h4 class="page__title">结算人银行卡原件照</h4></div>
                        <div class="weui-cells weui-cells_form">
                            <div class="weui-cell" id="settleBankPositiveDiv"><!-- weui-cell_warn -->
                                <div class="weui-cell__bd">
                                    <img v-model="settleBankPositiveImg" id="settleBankPositiveImg" title="上传银行卡正面照"
                                         src="../statics/aui/images/dpns.png" width="90%" onclick="settleBankPositive.click()"
                                         height="100px;">
                                    <input type="file" name="settleBankPositive" id="settleBankPositive" style="visibility: hidden;
                             height: 0px;" multiple accept="image/*" capture="camera"
                                           onchange="readURL('settleBankPositiveImg',this)">
                                </div>
                                <div class="weui-cell__ft">
                                    <i class="weui-icon-warn"></i>
                                </div>
                            </div>
                            <div class="weui-cell" id="settleBankOppositeDiv"><!-- weui-cell_warn -->
                                <div class="weui-cell__bd">
                                    <img v-model="settleBankOppositeImg" id="settleBankOppositeImg" title="上传银行卡反面照"
                                         src="../statics/aui/images/dpns.png" width="90%" onclick="settleBankOpposite.click()"
                                         height="100px">
                                    <input type="file" id="settleBankOpposite" name="settleBankOpposite" style="visibility: hidden;
                             height: 0px" multiple capture="camera" accept="image/*"
                                           onchange="readURL('settleBankOppositeImg',this)">
                                </div>
                                <div class="weui-cell__ft">
                                    <i class="weui-icon-warn"></i>
                                </div>
                            </div>
                        </div>
                        <div class="weui-cells__title"><h4 class="page__title">结算授权书</h4></div>
                        <div class="weui-cells weui-cells_form">
                            <div class="weui-cell" id="settlementBookDiv"><!-- weui-cell_warn -->
                                <div class="weui-cell__bd">
                                    <img v-model="settlementBookImg" id="settlementBookImg" src="../statics/aui/images/dpns.png"
                                         width="90%" onclick="settlementBook.click()" height="100px;" title="上传结算授权书">
                                    <input type="file" name="settlementBook" id="settlementBook" style="visibility: hidden;
                             height: 0px;" multiple accept="image/*" capture="camera"
                                           onchange="readURL('settlementBookImg',this)">
                                </div>
                                <div class="weui-cell__ft">
                                    <i class="weui-icon-warn"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="page__bd" id="settlementType2" style="display: none">
                        <div class="weui-cells__title"><h4 class="page__title">结算账户申请书或印鉴卡</h4></div>
                        <div class="weui-cells weui-cells_form">
                            <div class="weui-cell" id="sealCardDiv"><!-- weui-cell_warn -->
                                <div class="weui-cell__bd">
                                    <img v-model="sealCardImg" id="sealCardImg" src="../statics/aui/images/dpns.png" width="90%"
                                         height="100px;" onclick="sealCard.click()" title="上传申请书或印鉴卡">
                                    <input type="file" name="sealCard" id="sealCard" style="visibility: hidden; height: 0px;"
                                           multiple accept="image/*" capture="camera" onchange="readURL('sealCardImg',this)">
                                </div>
                                <div class="weui-cell__ft">
                                    <i class="weui-icon-warn"></i>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="weui-cells__title"><h4 class="page__title">企业门头照</h4></div>
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell" id="outerDiv"><!-- weui-cell_warn -->
                            <div class="weui-cell__bd">
                                <img v-model="outerImg" id="outerImg" src="../statics/aui/images/dpmt.png" width="90%"
                                     height="100px;" onclick="outer.click()" title="上传企业门头照">
                                <input type="file" id="outer" name="outer" style="visibility: hidden; height: 0px;" multiple
                                       capture="camera" accept="image/*" onchange="readURL('outerImg',this)">
                            </div>
                            <div class="weui-cell__ft">
                                <i class="weui-icon-warn"></i>
                            </div>
                        </div>
                    </div>

                    <label class="weui-agree">
                        <input id="isRead" type="checkbox" class="weui-agree__checkbox"/>
                        <span class="weui-agree__text">阅读并同意<a href="javascript:void(0);">《相关条款》</a></span>
                    </label>
                    <div class="page__bd page__bd_spacing">
                        <div class="weui-cell"><!-- weui-cell_warn -->
                            <br/>
                            <div style="width: 40%;padding-right: 10px">
                                <a href="javascript:;" class="weui-btn weui-btn_primary" onclick="submitUpStep(2)">上一步</a>
                            </div>
                            <div style="width: 55%">
                                <a href="javascript:;" class="weui-btn weui-btn_primary" onclick="onclkAppSettlingAccount();">入驻申请</a>
                            </div>
                        </div>
                        <br/>
                    </div>
                </div>

                </form>

            </div>
        </div>
    </div>
</div>
<div id="dialogs">
    <div class="js_dialog" id="iosDialog2" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__bd" id="DialogMessage"></div>
            <div class="weui-dialog__ft">
                <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary DeleteDefault">确定</a>
            </div>
        </div>
    </div>
    <!-- loading toast -->
    <div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">数据处理中</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    //弹框提示初始化
    var $iosDialog2 = $('#iosDialog2');
    $('#dialogs').on('click', '.DeleteDefault', function () { //取消按钮事件
        $(this).parents('.js_dialog').fadeOut(200);
    });
    //上一步处理
    function submitUpStep(nub) {
        window.location.href = "${ctx}/auth/submitUpStep?presentNub=" + nub;
    }

    function onclkisApply(nub){
        $("#isApplyDiv"+nub).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        $(".isApplyDiv").hide();
        $("#isApply"+nub).show();
    }

    //上传图片选取展现
    function readURL(outerImg, input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                document.getElementById(outerImg).src = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    //
    function setType(value) {
        if (value == 1) {
            $('#settlementType1').show();
            $('#settlementType2').hide();
        } else if (value == 2) {
            $('#settlementType2').show();
            $('#settlementType1').hide();
        }
    }

    //光标离开事件
    $(".weui-input").blur(function(){
        var divname=this.name+"Div";
        if ($(this).val().trim().length == 0) {
            $('#'+divname).addClass("weui-cell_warn");
        }else{
            $('#'+divname).removeClass("weui-cell_warn");
        }
        if(divname=="bankCardDiv" && !(/^[0-9]*$/.test($(this).val())) ){  //结算帐号验证
        	$('#'+divname).addClass("weui-cell_warn");
        	$("#DialogMessage").html("结算帐号只能输入数字");
            $iosDialog2.fadeIn(200);
        }
    });
    ///商户入驻 数据验证
    function valdateAppSettlingAccount(objName) {
        $('#bankUserDiv').removeClass("weui-cell_warn");
        $('#bankNameDiv').removeClass("weui-cell_warn");
        $('#bankCardDiv').removeClass("weui-cell_warn");
        $('#settleUserPositiveDiv').removeClass("weui-cell_warn");
        $('#settleUserOppositeDiv').removeClass("weui-cell_warn");
        $('#settleBankPositiveDiv').removeClass("weui-cell_warn");
        $('#settleBankOppositeDiv').removeClass("weui-cell_warn");
        $('#settlementBookDiv').removeClass("weui-cell_warn");
        $('#sealCardDiv').removeClass("weui-cell_warn");
        $('#outerDiv').removeClass("weui-cell_warn");

        var bankUser = $("#bankUser").val();
        var bankName = $("#bankName").val();
        var bankCard = $("#bankCard").val();
        var outer = $("#outer").val();
        var settlementBook = $("#settlementBook").val();//结算授权书
        var settleUserPositive = $("#settleUserPositive").val();//结算人身份证正面
        var settleUserOpposite = $("#settleUserOpposite").val();//结算人身份证反面
        var settleBankPositive = $("#settleBankPositive").val();//结算人银行卡正面
        var settleBankOpposite = $("#settleBankOpposite").val();//结算人银行卡反面
        var sealCard = $("#sealCard").val();//账户申请书或印鉴卡
        var settleType = $('input:radio:checked').val()

        var errorMessage = "";
        if ((objName=="bankUser"||objName=="objName")&&bankUser.trim().length == 0) {errorMessage="请填写结算账户户名";$('#bankUserDiv').addClass("weui-cell_warn");}
        if ((objName=="bankName"||objName=="objName")&&bankName.trim().length == 0) {errorMessage="请填写账户开户行名称";$('#bankNameDiv').addClass("weui-cell_warn");}
        if ((objName=="bankCard"||objName=="objName")&&bankCard.trim().length == 0) {errorMessage="请填写结算帐号";$('#bankCardDiv').addClass("weui-cell_warn");}
        if (settleType == 1) {
            if ((objName=="settleUserPositive"||objName=="objName")&&settleUserPositive.trim().length == 0) {errorMessage = "请上传结算人身份证正面照";$('#settleUserPositiveDiv').addClass("weui-cell_warn");}
            if ((objName=="settleUserOpposite"||objName=="objName")&&settleUserOpposite.trim().length == 0) {errorMessage = "请上传结算人身份证反面照";$('#settleUserOppositeDiv').addClass("weui-cell_warn");}
            if ((objName=="settleBankPositive"||objName=="objName")&&settleBankPositive.trim().length == 0) {errorMessage = "请上传结算人银行卡正面照";$('#settleBankPositiveDiv').addClass("weui-cell_warn");}
            if ((objName=="settleBankOpposite"||objName=="objName")&&settleBankOpposite.trim().length == 0) {errorMessage = "请上传结算人银行卡反面照";$('#settleBankOppositeDiv').addClass("weui-cell_warn");}
            if ((objName=="settlementBook"||objName=="objName")&&settlementBook.trim().length == 0) {errorMessage = "请上传结算授权书";$('#settlementBookDiv').addClass("weui-cell_warn");}
            if ((objName=="outer"||objName=="objName")&&outer.trim().length == 0) {errorMessage = "请上传企业门头照";$('#outerDiv').addClass("weui-cell_warn");}
        } else if (settleType == 2) {
            if ((objName=="sealCard"||objName=="objName")&&sealCard.trim().length == 0) {errorMessage = "请上传账户申请书或印鉴卡";$('#sealCardDiv').addClass("weui-cell_warn");}
            if ((objName=="outer"||objName=="objName")&&outer.trim().length == 0) {errorMessage = "请上传企业门头照";$('#outerDiv').addClass("weui-cell_warn");}
        }
        if (errorMessage != "") {
            $('#loadingToast').fadeOut(100);
            $("#DialogMessage").html("您有没填完的信息，请填写");
            $iosDialog2.fadeIn(200);
            return true;
        } else {
            return false;
        }
    }

    ///商户入驻 第二步 数据保存
    function onclkAppSettlingAccount() {
        $('#loadingToast').fadeIn(100);
        if (valdateAppSettlingAccount("objName")) {
            return;
        } else {
            if (!$('#isRead').is(':checked')) {
                $('#loadingToast').fadeOut(100);
                $("#DialogMessage").html("请阅读并同意相关条款");
                $iosDialog2.fadeIn(200);
                return;
            }
            $("#submitSettlingAccount").submit();
        }
    }
</script>

</body>
